<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/aui.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="../css/common.css" />-->
		<style>
			.hide {
				display: none;
			}
			/*垂直按钮*/
			.aui-btn-tab {
				width: 100%;
				background-color: #fff;
				display: box;
				display: -webkit-box;
				box-sizing: border-box;
				font-size: 12px;
				height: 55px;
			}
			.aui-btn-tab li {
				position: relative;
				text-align: center;
				color: #666;
				width: 100%;
				box-flex: 1;
				-webkit-box-flex: 1;
				box-sizing: border-box;
			}
			.aui-btn-tab li {
				font-size: 12px;
				margin-bottom: 0;
			}
			.aui-btn-tab .aui-iconfont {
				font-size: 22px;
				color: #666;
				padding-top: 5px;
				height: 30px;
				line-height: 30px;
				display: inline-block;
			}
			.aui-btn-tab li:active {
				color: #bdc3c7;
			}
			.aui-btn-tab li:active p {
				color: #bdc3c7;
			}
			.aui-btn-tab li:active span {
				color: #bdc3c7;
			}
			.aui-nav {
				background: #EEEEEE;
			}
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header">
			<a class="aui-btn aui-btn-warning aui-pull-left" tapmode onclick="api.closeWin();"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<div class="aui-title">
				手写签名记录
			</div>
			<div class="aui-tab">
				<ul class="aui-tab-nav" id="demo1">
					<li class="active" tapmode="" onclick="ChangeData(1)">
						认证签名
					</li>
					<li tapmode="" onclick="ChangeData(2)">
						参考签名
					</li>
					<!--<li>标签三</li>-->
				</ul>
			</div>
		</header>
		<footer class="aui-nav" id="footer1">
			<div class="aui-content " id="tabmenu1">
				<ul class="aui-btn-tab">
					<li tapmode onclick="OpenSearch()">
						<span class="aui-iconfont aui-icon-search"></span>
						<p>
							筛选
						</p>
					</li>
					<li tapmode onclick="SelectAll();">
						<span class="aui-iconfont aui-icon-roundcheck"></span>
						<p id="SelectAll1">
							全选
						</p>
					</li>
					<li tapmode onclick="AddSign();">
						<span class="aui-iconfont aui-icon-post"></span>
						<p>
							新增
						</p>
					</li>
					<!--				<li tapmode onclick="Del();">
					<span class="aui-iconfont aui-icon-delete"></span>
					<p>
					删除
					</p>
					</li>-->
					<li tapmode onclick="MenuMore('siglistsort_frm');">
						<span class="aui-iconfont aui-icon-order"></span>
						<p>
							排序
						</p>
					</li>
					<li tapmode onclick="MenuMore('siglistmore_frm');">
						<span class="aui-iconfont aui-icon-sort"></span>
						<p>
							菜单
						</p>
					</li>
				</ul>
				<div></div>
		</footer>
		<footer class="aui-nav hide" id="footer2">
			<div class="aui-content" id="tabmenu2">
				<ul class="aui-btn-tab">
					<li tapmode onclick="SendEvent('CloudSync')">
						<span class="aui-iconfont aui-icon-down"></span>
						<p>
							云端同步
						</p>
					</li>
					<li tapmode onclick="SelectAll();">
						<span class="aui-iconfont aui-icon-roundcheck"></span>
						<p id="SelectAll2">
							全选
						</p>
					</li>
					<li tapmode onclick="AddSign();">
						<span class="aui-iconfont aui-icon-post"></span>
						<p>
							新增
						</p>
					</li>
					<li tapmode onclick="SendEvent('Refresh');">
						<span class="aui-iconfont aui-icon-refresh"></span>
						<p>
							刷新
						</p>
					</li>
					<li tapmode onclick="MenuMore('siglistmore_frm')">
						<span class="aui-iconfont aui-icon-sort"></span>
						<p>
							菜单
						</p>
					</li>
				</ul>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/debug.js"></script>
	<script type="text/javascript">
		var bSelect = [true, true, true];
		var kind = 1;
		var bMenu = false;
		//全选、反选
		function SelectAll() {
			api.sendEvent({
				name : 'SignList',
				extra : {
					'action' : 'SelectAll',
					'kind' : kind
				}
			});
			ChangeMenu('SelectAll', kind, ['取消全选', "全选"]);
		}

		function ChangeMenu(id, k, text) {
			var el = $api.byId(id + k);
			var el1 = $api.prev(el);
			if (bSelect[k]) {
				$api.text(el, text[0]);
				$api.removeCls(el1, 'aui-icon-roundcheck');
				$api.addCls(el1, 'aui-icon-roundcheckfill');
			} else {
				$api.text(el, text[1]);
				$api.removeCls(el1, 'aui-icon-roundcheckfill');
				$api.addCls(el1, 'aui-icon-roundcheck');
				//count[k] = 0;
			}
			bSelect[k] = !bSelect[k];
		}

		//等多选项
		function MenuMore(framename) {
			var count = $api.getStorage('count') || 0;
			setTimeout(function() {
				api.openFrame({
					name : framename,
					url : framename + '.html',
					bounces : true,
					bgColor : 'rgba(0,0,0,0.6)',
					vScrollBarEnabled : false,
					hScrollBarEnabled : false,
					pageParam : {
						kind : kind,
						count : count
					},
					rect : {
						x : 0,
						y : 0,
						w : 'auto',
						h : 'auto'
					}
				});
			}, 100);
			bMenu = true;
		}

		var EventName = "SignList";
		function SendEvent(evt, callback) {
			api.sendEvent({
				name : EventName,
				extra : {
					'action' : evt,
					'kind' : kind
				}
			}, function(ret, err) {
				if ( typeof callback == 'function')
					callback(ret, err);
			});
		}

		//新增
		function AddSign() {
			api.openWin({
				name : 'root'
			});
			api.sendEvent({
				name : 'AddSign',
				extra : '2'
			})
		}

		function ChangeData(k) {
			api.sendEvent({
				name : 'SignList_Change',
				extra : k
			}, function(ret, err) {
			});
			kind = k;
			var footer1 = $api.byId('footer1');
			var footer2 = $api.byId('footer2');
			if (k == 0) {
				;
			} else if (k == 1) {
				$api.addCls(footer2, 'hide');
				$api.removeCls(footer1, 'hide');
			} else {
				$api.addCls(footer1, 'hide');
				$api.removeCls(footer2, 'hide');
			}
		}

		function CloseMenu() {
			bMenu = false;
		}

		function OpenSearch() {
			api.openWin({
				name : 'search',
				url : 'signsearch_win.html'
			});
		}

		apiready = function() {
			api.removeLaunchView();
			api.parseTapmode();
			//var uid = '564725a940f0bb967aec9260';
			var uid=$api.getStorage('uid');
			var demo1 = $api.domAll("#demo1 li");
			for (var i in demo1) {
				$api.addEvt(demo1[i], 'click', function() {
					$api.removeCls($api.dom("#demo1 li.active"), 'active');
					$api.addCls(this, 'active');
					api.sendEvent({
						name : 'ChangeDataKind',
						extra : i
					});
				});
			}
			var header = $api.byId('aui-header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			var foot = $api.byId('footer1');
			var footPos = $api.offset(foot);
			var body_h = $api.offset($api.dom('body')).h;
			api.openFrame({
				name : 'siglist_frm',
				url : 'siglist_frm.html',
				vScrollBarEnabled : false,
				hScrollBarEnabled : false,
				bounces : false,
				rect : {
					x : 0,
					y : headerPos.h,
					w : 'auto',
					h : body_h - headerPos.h - footPos.h
				},
				pageParam : {
					kind : 1
				}
			});
			api.addEventListener({
				name : 'ChangeUserName'
			}, function(ret, err) {
				userName = ret.value || userName;
			});
			// 监听是否注册或者登录成功
			api.addEventListener({
				name : 'reg_login_successEvent'
			}, function(ret) {
				if (ret && ret.value) {
					userName = ret.value.sig;
					uid = $api.getStorage("uid");
				}
			});
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				if (bMenu) {
					api.closeFrame({
						name : 'siglistmenu_frm'
					});
					bMenu = false;
				} else
					api.closeWin();
			});
		};
	</script>
</html>